use yew::{function_component, html, Callback, Html};
use crate::business::component::pop_over::PopOver;
use crate::business::util::input::click_node;

#[function_component(MessageControlView)]
pub fn message_control_view() -> Html {
    
    let select_file_callback = Callback::from(move |_| {
        click_node("imFileInput");
    });

    html! {
        <div class="message-toolbar">
            <span class="popover-container top">
                <a href="#"><img src="/imgs/smile.png"/></a>
                <PopOver>
                    <h1>{ "1111111111111111111111111"}</h1>
                </PopOver>
            </span>

            <img src="/imgs/file.png" onclick= { select_file_callback }/>
            <input type="file" id="imFileInput" style="display:none;"/>

            <img src="/imgs/cut.png"/>
            <img src="/imgs/message.png"/>
            <span class="row-expanded"></span>
            <img src="/imgs/call_line.png"/>
        </div>
    }
}